<template>
  <div id="app">
    <Layout :title="$route.meta.title" v-show="!$route.meta.full"></Layout>
    <router-view :style="isFull"/>
    <van-tabbar v-model="active" v-show="$route.meta.hasTabber">
      <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/BBS" icon="smile-comment-o">论坛</van-tabbar-item>
      <van-tabbar-item replace to="/mine" icon="contact">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import Layout from './components/Layout.vue'
import { Tabbar, TabbarItem } from 'vant'
export default {
  name: 'app',
  components: {
    Layout,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },
  data() {
    return {
      active: 0
    }
  },
  computed: {
    isFull() {
      let sty = ''
      if (!this.$route.meta.full) {
        sty += 'padding-top: 46px;'
      }
      if (this.$route.meta.hasTabber) {
        sty += 'padding-bottom: 50px;'
      }
      return sty
    }
  }
}
</script>


<style>
html {
  height: 100%;
}
body {
  font-size: 16px;
  background-color: #f8f8f8;
  color: #333;
  -webkit-font-smoothing: antialiased;
  height: 100%;
}
#app {
  height: 100%;
}
</style>
